<template>
  <div class="merchantDetailPage">
    <van-nav-bar
      title="商家介绍"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="merchantDetailPageInner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        lazy-render>
        <van-swipe-item
          v-for="item in merchantInfo.environmentPicFile"
          :key="item.id">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="item.url"
          />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">
            <span>图片{{ active + 1 }}/{{ total }}</span>
          </div>
        </template>
      </van-swipe>
      <div class="my-detail">
        <MerchantCard
          style="margin-bottom: 12px;"
          v-if="merchantInfo.hasOwnProperty('id')"
          :merchantData="merchantInfo"
        />
        <van-sticky :offset-top="58">
          <div
            style="margin-bottom: 12px;"
            class="my-tabs">
            <van-tabs
              color="#FFC600"
              title-inactive-color="#000000"
              type="card"
              v-model:active="active"
              swipeable
              animated>
              <van-tab v-for="item in tabList">
                <template #title>
                  {{ item }}
                </template>
              </van-tab>
            </van-tabs>
          </div>
        </van-sticky>
        <DishesList
          v-if="active === 0"
          :merchantId="merchantId"
        />
        <CommentList
          v-if="active === 1"
          :merchantId="merchantId"
          :merchantInfo="merchantInfo"
        />
        <InfoList
          v-if="active === 2"
          :merchantId="merchantId"
          :merchantInfo="merchantInfo"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import MerchantCard from './merchantCard.vue';
import DishesList from './dishesList.vue';
import CommentList from './commentList.vue';
import InfoList from './infoList.vue';
import { merchantDetailMethod, goodsListMethod } from "@/api/homePage.js";
import { useRoute } from 'vue-router'
const route = useRoute();
const { id } = route.query;
const merchantId = ref(id);

//获取商家详情
onMounted(() => { getMerchantDetail() });
const merchantInfo = ref({
  picFile: { url: undefined },
  snapshot: ''
});
const getMerchantDetail = async () => {
  const res = await merchantDetailMethod({ id });
  const { data } = res;
  merchantInfo.value = {
    ...data,
    tagsList: data.tags.split(','),
  };
}

//tab切换栏
const tabList = ref(["菜单", "评价", "商家"])
const active = ref(0)

//返回
const onClickLeft = () => history.back();

</script>
<style lang="less" scoped>
div.merchantDetailPage {
  width: 100%;
  height: 100%;
  position: relative;
  div.merchantDetailPageInner {
    height: calc(100% - 46px);
    overflow: auto;
    position: relative;
    background: #f7f7f7;
    >.my-swipe {
      .van-swipe-item {
        height: 240px;
      }
      .custom-indicator {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        padding: 2px 5px;
        position: absolute;
        right: 5px;
        top: 5px;
        span {
          color: #fff;
          font-size: 12px;
        }
      }
    }
    >.my-detail {
      width: calc(100% - 24px);
      padding-bottom: 12px;
      position: absolute;
      left: 12px;
      top: 200px;
      .my-tabs {
        width: 100%;
        height: 50px;
        background: #ffffff;
        border-radius: 24px;
        padding: 4px;
        box-sizing: border-box;
        .van-tabs {
          width: 100%;
          height: 42px;
          ::v-deep {
            .van-tab {
              height: 40px !important;
              border-radius: 20px;
              border: unset !important;
            }
            .van-tabs__nav {
              height: 40px !important;
              border-radius: 20px;
              border: unset !important;
              margin-top: 1px;
            }
            .van-tabs__wrap {
              height: unset!important;
            }
          }
        }
        ::v-deep .van-tabs__nav--card {
          margin: 0;
        }
      }
    }
  }
}
</style>
